<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div id="time" class="input-group time pg-control editable">
<div class="input-group spinner editable HH double-digit" data-min="0" data-max="23" data-val="2">
<input type="number" class="form-control" placeholder="HH" min="0" max="23"/>
<div class="input-group-btn-vertical">
<button class="btn btn-default btn-up" type="button"><i class="fa fa-caret-up"></i></button>
<button class="btn btn-default btn-down" type="button"><i class="fa fa-caret-down"></i></button>
</div>
<div class="input-group-addon">:</div>
</div>
<div class="input-group spinner editable mm double-digit" data-min="0" data-max="59" data-val="2">
<input type="number" class="form-control" placeholder="MI" min="0" max="59"/>
<div class="input-group-btn-vertical">
<button class="btn btn-default btn-up" type="button"><i class="fa fa-caret-up"></i></button>
<button class="btn btn-default btn-down" type="button"><i class="fa fa-caret-down"></i></button>
</div>
<div class="input-group-addon">:</div>
</div>
<div class="input-group spinner editable SS double-digit" data-min="0" data-max="59" data-val="2">
<input type="number" class="form-control" placeholder="SS" min="0" max="59"/>
<div class="input-group-btn-vertical">
<button class="btn btn-default btn-up" type="button"><i class="fa fa-caret-up"></i></button>
<button class="btn btn-default btn-down" type="button"><i class="fa fa-caret-down"></i></button>
</div>
</div>
</div>
<div id="datetime" class="input-group datetime pg-control editable">
<div class="input-group spinner editable double-digit DD" data-min="1" data-max="31" data-val="2">
<input type="number" class="form-control" placeholder="DD" min="1" max="31"/>
<div class="input-group-btn-vertical">
<button class="btn btn-default btn-up" type="button"><i class="fa fa-caret-up"></i></button>
<button class="btn btn-default btn-down" type="button"><i class="fa fa-caret-down"></i></button>
</div>
<div class="input-group-addon">\</div>
</div>
<div class="input-group spinner editable double-digit MM" data-min="1" data-max="12" data-val="2">
<input type="number" class="form-control" placeholder="MM" min="1" max="12"/>
<div class="input-group-btn-vertical">
<button class="btn btn-default btn-up" type="button"><i class="fa fa-caret-up"></i></button>
<button class="btn btn-default btn-down" type="button"><i class="fa fa-caret-down"></i></button>
</div>
<div class="input-group-addon">\</div>
</div>
<div class="input-group spinner editable four-digit YY" data-min="0" data-max="9999" data-val="2016">
<input type="number" class="form-control" placeholder="YYYY" min="0" max="9999"/>
<div class="input-group-btn-vertical">
<button class="btn btn-default btn-up" type="button"><i class="fa fa-caret-up"></i></button>
<button class="btn btn-default btn-down" type="button"><i class="fa fa-caret-down"></i></button>
</div>
</div>
<div class="input-group spinner editable HH double-digit" data-min="0" data-max="23" data-val="2">
<input type="number" class="form-control" placeholder="HH" min="0" max="23"/>
<div class="input-group-btn-vertical">
<button class="btn btn-default btn-up" type="button"><i class="fa fa-caret-up"></i></button>
<button class="btn btn-default btn-down" type="button"><i class="fa fa-caret-down"></i></button>
</div>
<div class="input-group-addon">:</div>
</div>
<div class="input-group spinner editable mm double-digit" data-min="0" data-max="59" data-val="2">
<input type="number" class="form-control" placeholder="MI" min="0" max="59"/>
<div class="input-group-btn-vertical">
<button class="btn btn-default btn-up" type="button"><i class="fa fa-caret-up"></i></button>
<button class="btn btn-default btn-down" type="button"><i class="fa fa-caret-down"></i></button>
</div>
<div class="input-group-addon">:</div>
</div>
<div class="input-group spinner editable SS double-digit" data-min="0" data-max="59" data-val="2">
<input type="number" class="form-control" placeholder="SS" min="0" max="59"/>
<div class="input-group-btn-vertical">
<button class="btn btn-default btn-up" type="button"><i class="fa fa-caret-up"></i></button>
<button class="btn btn-default btn-down" type="button"><i class="fa fa-caret-down"></i></button>
</div>
</div>
</div>
<div id="date" class="input-group date pg-control editable">
<div class="input-group spinner editable double-digit DD" data-min="1" data-max="31" data-val="2">
<input type="number" class="form-control" placeholder="DD" min="1" max="31"/>
<div class="input-group-btn-vertical">
<button class="btn btn-default btn-up" type="button"><i class="fa fa-caret-up"></i></button>
<button class="btn btn-default btn-down" type="button"><i class="fa fa-caret-down"></i></button>
</div>
<div class="input-group-addon">:</div>
</div>
<div class="input-group spinner editable double-digit MM" data-min="1" data-max="12" data-val="2">
<input type="number" class="form-control" placeholder="MM" min="1" max="12"/>
<div class="input-group-btn-vertical">
<button class="btn btn-default btn-up" type="button"><i class="fa fa-caret-up"></i></button>
<button class="btn btn-default btn-down" type="button"><i class="fa fa-caret-down"></i></button>
</div>
<div class="input-group-addon">:</div>
</div>
<div class="input-group spinner editable four-digit YY" data-min="0" data-max="9999" data-val="2016">
<input type="number" class="form-control" placeholder="YYYY" min="0" max="9999"/>
<div class="input-group-btn-vertical">
<button class="btn btn-default btn-up" type="button"><i class="fa fa-caret-up"></i></button>
<button class="btn btn-default btn-down" type="button"><i class="fa fa-caret-down"></i></button>
</div>
</div>
</div>
<div id="time-readonly" class="input-group pg-control time">
<input class="form-control double-digit readonly HH" value="00" readonly/>
<div class="input-group-addon">:</div>
<input class="form-control double-digit readonly MI" value="00" readonly/>
<div class="input-group-addon">:</div>
<input class="form-control double-digit readonly SS" value="00" readonly/>
</div>
<div id="datetime-readonly" class="input-group pg-control datetime">
<input class="form-control double-digit readonly DD" value="01" readonly/>
<div class="input-group-addon">\</div>
<input class="form-control double-digit readonly MM" value="12" readonly/>
<div class="input-group-addon">\</div>
<input class="form-control four-digit readonly YY" value="1979" readonly/>
<div class="input-group-addon"> </div>
<input class="form-control double-digit readonly HH" value="00" readonly/>
<div class="input-group-addon">:</div>
<input class="form-control double-digit readonly MI" value="00" readonly/>
<div class="input-group-addon">:</div>
<input class="form-control double-digit readonly SS" value="00" readonly/>
</div>
@import url(http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css);
.double-digit {
max-width: 45px;
}
.four-digit {
max-width: 66px;
}
.spinner > .input-group-btn-vertical > .btn:first-child {
border-top-right-radius: 4px;
border-bottom: 1px solid darkgray;
}
.spinner > .input-group-btn-vertical > .btn:last-child {
border-bottom-right-radius: 4px;
}
.spinner > .form-control {
padding: 4px 2px;
height: 28px;
text-align: left;
border: none;
border-color: transparent;
bax-shadow: inset 0 1px 1px transparent;
-webkit-box-shadow: inset 0 1px 1px transparent;
-moz-box-shadow: inset 0 1px 1px transparent;
}
.spinner > .form-control:focus,
.spinner > .form-control:focus,
.spinner > .form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
.spinner > input[type=number]::-webkit-inner-spin-button,
.spinner > input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.pg-control {
margin: 10px;
display: table;
border: 1px solid darkgray;
border-radius: 5px;
}
.time {
width: 119px;
}
.date {
width: 133px;
}
.datetime {
width: 250px;
}
.pg-control > .form-control {
padding: 4px 4px;
}
.pg-control > .spinner {
display: table;
float: left;
}
.pg-control .spinner > .input-group-btn-vertical {
position: relative;
white-space: nowrap;
width: 15px;
vertical-align: middle;
display: none;
border-left: 1.5px solid darkgray;
}
.pg-control .spinner > .input-group-btn-vertical:last-child {
display: table-cell;
visibility: hidden;
}
.pg-control .spinner > .input-group-btn-vertical > .btn {
display: block;
float: none;
width: 100%;
max-width: 100%;
padding: 6px 0px;
margin-left: 0px;
position: relative;
border-radius: 0;
height: 14px;
}
.pg-control .spinner:not(:last-child) > .input-group-btn-vertical > .btn:first-child {
border-top-right-radius: 0px;
}
.pg-control .spinner:not(:last-child) > .input-group-btn-vertical > .btn:last-child {
border-bottom-right-radius: 0px;
}
.pg-control .spinner > .input-group-btn-vertical i {
position: absolute;
top: 0;
left: 2px;
}
.pg-control .input-group-addon {
padding: 0px 0px 2px 0px;
width: 15px;
height: 28px;
line-height: 13px;
background-color: transparent;
border-color: transparent;
font-weight: bold;
font-size: x-large;
display: table-cell;
text-align: center;
}
.pg-control:not(.editable) .spinner > .input-group-addon {
width: 0;
}
.pg-control.editable .spinner > .input-group-add {
width: 15px;
}
.pg-control.editable.active spinner > .input-group-btn-vertical {
display: table-cell;
visibility: visible;
}
.pg-control.active .spinner > .input-group-btn-vertical {
display: table-cell;
visibility: visible;
}
.pg-control.active .spinner > .input-group-addon {
display: none;
}
.pg-control > .form-control.readonly {
border: none;
background-color: inherit;
height: 28px;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
$(function() {
function loadScript(url, callback)
{
// Adding the script tag to the head as suggested before
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// Then bind the event to the callback function.
// There are several events for cross browser compatibility.
script.onreadystatechange = callback;
script.onload = callback;
// Fire the loading
head.appendChild(script);
}
loadScript('https://amiliaapp.github.io/backform/3rd/underscore.js', function() {
loadScript('https://amiliaapp.github.io/backform/3rd/backbone.js', function() {
loadScript('https://amiliaapp.github.io/backform/src/backform.js', function() {
// Spinner PUBLIC CLASS DEFINITION
// ==============================
var Spinner = function (el, options) {
this.$el = $(el);
this.editable = this.$el.hasClass('editable');
this.$input = this.$el.find('input').first();
this.options = $.extend({}, Spinner.DEFAULTS, options);
this.max = this.$el.data('max');
this.min = this.$el.data('min');
this.def = this.$el.data('default');
this.val = this.$el.data('value') || this.def;
this.val = isNaN(this.val) ? 0 : this.val;
this.$input.val(this.val);
this.active = this.$el.data('active') || 0;
}
Spinner.DEFAULTS = {};
Spinner.prototype.increment = function (direction, by) {
if (!this.editable)
return false;
by = by || 1;
if (direction == 1) {
if (!_.isNaN(this.max) && this.val >= this.max) {
this.val = _.isNaN(this.min) ? 0 : this.min;
this.val += (by - 1);
} else {
this.val += by;
}
} else if (direction == -1) {
if (!_.isNaN(this.min) && this.val <= this.min) {
this.val = _.isNaN(this.max) ? Number.MAX_SAFE_INTEGER : this.max;
this.val -= (by - 1);
} else {
this.val -= by;
}
}
this.$input.val(this.val);
return true;
}
// Spinner plug definition
// ========================
function SpinnerPlugin() {
var args = Array.prototype.slice.call(arguments);
var op = args.length && args.shift();
return this.each(function () {
var $this = $(this),
data = $this.data('pgSpinner'),
options = typeof option == 'object' && option;
if (!data)
$this.data('pgSpinner', (data = new Spinner(this, options)));
switch (op) {
case 'increment':
data.increment.apply(data, args);
break;
case 'activate':
data.activate.apply(data, args);
break;
}
})
}
$.fn.pgSpinner = SpinnerPlugin;
$.fn.pgSpinner.Constructor = Spinner;
// Spinner DATA-API
// ================
$(document)
.on('click', '.spinner button.btn-up', function (ev) {
var $spinner = $(ev.target).closest('.spinner');
SpinnerPlugin.call($spinner, 'increment', 1);
})
.on('click', '.spinner button.btn-down', function (ev) {
var $spinner = $(ev.target).closest('.spinner');
SpinnerPlugin.call($spinner, 'increment', -1);
})
.on('focus', '.spinner');
var node = document.createElement('div');
function mouseWheelHandler(e) {
var normalize_mousewheel = function(e) {
var o = e && e.originalEvent || e,
d = o.detail, w = o.wheelDelta,
n = 300, n1 = n-1;
// Normalize delta
d = d ? w && (f = w/d) ? d/f : -d/1.35 : w/120;
// Quadratic scale if |d| > 1
d = d < 1 ? d < -1 ? (-Math.pow(d, 2) - n1) / n : d : (Math.pow(d, 2) + n1) / n;
// Delta *should* not be greater than 2...
e.delta = Math.min(Math.max(d / 2, -1), 1);
}
var el = e.target;
if (el) {
var $spinner = $(el).closest('.spinner'),
wheelDelta = $spinner.data('wheelDelta') || 0;
normalize_mousewheel(e);
wheelDelta += e.delta;
if (wheelDelta > 1 || wheelDelta < -1) {
var incrementBy = parseInt(wheelDelta, 10),
dir = wheelDelta > 1 ? 1 : -1;
if (dir === 1) {
wheelDelta -= incrementBy;
} else {
incrementBy = incrementBy * -1;
wheelDelta += incrementBy;
}
SpinnerPlugin.call($spinner, 'increment', dir, incrementBy);
}
$spinner.data('wheelDelta', wheelDelta);
e.preventDefault();
}
}
if ('onmousewheel' in node) {
var onMouseWheel = function(ev) {
ev = ev || window.event;
mouseWheelHandler(ev);
};
$(document).on('mousewheel', '.spinner', onMouseWheel);
$(document).on('mousewheel', '.spinner button.btn', onMouseWheel);
$(document).on('mousewheel', '.spinner input.form-control', onMouseWheel);
} else {
$(document).on('DOMMouseScroll', '.spinner input.form-control', mouseWheelHandler);
$(document).on('mousewheel', '.spinner button.btn', onMouseWheel);
$(document).on('mousewheel', '.spinner', onMouseWheel);
}
delete node;
var pgControl = function (el, options) {
this.$el = $(el);
this.editable = this.$el.hasClass('editable');
this.active = 0;
}
pgControl.prototype.activate = function () {
if (!this.editable)
return;
this.active++;
if (!this.$el.hasClass('active'))
this.$el.addClass('active');
}
pgControl.prototype.deactivate = function() {
if (!this.editable)
return;
var self = this;
setTimeout(
function() {
self.active--;
if (self.active <= 0 && self.$el.hasClass('active')) {
self.active = 0;
self.$el.removeClass('active');
}
}, 200
);
}
pgControl.prototype.mouseOver = function() {
if (!this.editable)
return;
if (!this.$el.hasClass('active'))
this.$el.addClass('active');
}
pgControl.prototype.mouseLeave = function() {
if (!this.editable)
return;
var self = this;
setTimeout(
function() {
if (self.active <= 0 && self.$el.hasClass('active')) {
self.$el.removeClass('active');
}
}, 200
);
}
// pgControl plugin definition
// ========================
function pgControlPlugin() {
var args = Array.prototype.slice.call(arguments);
var op = args.length && args.shift();
return this.each(function () {
var $this = $(this),
data = $this.data('pgControl'),
options = typeof option == 'object' && option;
if (!data)
$this.data('pgControl', (data = new pgControl(this, options)));
if (op in pgControl.prototype) {
op = pgControl.prototype[op];
op.apply(data, args);
}
});
}
$.fn.pgControl = pgControlPlugin;
$.fn.pgControl.Constructor = pgControl;
// pgControl DATA-API
// ================
var activateFunc = function(ev) {
var $el = $(ev.target).closest('.pg-control');
pgControlPlugin.call($el, 'activate');
},
deactivateFunc = function(ev) {
var $el = $(ev.target).closest('.pg-control');
pgControlPlugin.call($el, 'deactivate');
},
onMouseOver = function(ev) {
var $el = $(ev.target).closest('.pg-control');
pgControlPlugin.call($el, 'mouseOver');
},
onMouseLeave = function(ev) {
var $el = $(ev.target).closest('.pg-control');
pgControlPlugin.call($el, 'mouseLeave');
};
$(document)
.on('focus', '.pg-control.editable input', activateFunc)
.on('focus', '.pg-control.editable button', activateFunc)
.on('blur', '.pg-control.editable input', deactivateFunc)
.on('blur', '.pg-control.editable button', deactivateFunc)
.on('mouseover mouseenter', '.pg-control.editable', onMouseOver)
.on('mouseleave', '.pg-control.editable', onMouseLeave)
});
});
});
});